<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title id="page-title">濉溪区域影像主题大数据</title>
    <script src="./js/jquery-1.12.3.min.js"></script>
    <script src="./js/echarts.min.js"></script>
    <script src="./js/echarts-liquidfill.min.js"></script>
    <link rel="stylesheet" href="./css/common.css" />
  </head>

  <body>
    <div class="container">
      <!-- 头部 -->
      <div class="header-con">
        <div class="all-title-bg"></div>
      </div>
      <div class="main-con">
        <!-- 左侧区域 -->
        <div class="left-area">
          <div class="left-box-one">
            <div class="item">
              <div class="item-top">
                <div class="item-top-small one"></div>
              </div>
              <div class="item-bottom">
                <p>健康档案数</p>
                <p>22299</p>
              </div>
            </div>

            <div class="item">
              <div class="item-top">
                <div class="item-top-small two"></div>
              </div>
              <div class="item-bottom">
                <p>签约人数</p>
                <p>13366</p>
              </div>
            </div>

            <div class="item">
              <div class="item-top">
                <div class="item-top-small three"></div>
              </div>
              <div class="item-bottom">
                <p>执行人数</p>
                <p>5647</p>
              </div>
            </div>
          </div>
          <div class="left-box-two">
            <div class="card-title">
              <span class="card-title-text">重点人群签约情况</span>
            </div>
            <div class="box-two-main">
              <div class="item">
                <div class="item-left">
                  <img src="./images/left-two-item-one.png" alt="" />
                </div>
                <div class="item-right">
                  <p>严重精神障碍 （<span>98.07%</span>）</p>
                  <p>
                    签约人数
                    <span>818</span>
                    人
                    <span>（829人）</span>
                  </p>
                </div>
              </div>
              <div class="item">
                <div class="item-left">
                  <img src="./images/left-two-item-two.png" alt="" />
                </div>
                <div class="item-right">
                  <p>严重精神障碍 （<span>98.07%</span>）</p>
                  <p>
                    签约人数
                    <span>818</span>
                    人
                    <span>（829人）</span>
                  </p>
                </div>
              </div>
              <div class="item">
                <div class="item-left">
                  <img src="./images/left-two-item-three.png" alt="" />
                </div>
                <div class="item-right">
                  <p>严重精神障碍 （<span>98.07%</span>）</p>
                  <p>
                    签约人数
                    <span>818</span>
                    人
                    <span>（829人）</span>
                  </p>
                </div>
              </div>
              <div class="item">
                <div class="item-left">
                  <img src="./images/left-two-item-four.png" alt="" />
                </div>
                <div class="item-right">
                  <p>严重精神障碍 （<span>98.07%</span>）</p>
                  <p>
                    签约人数
                    <span>818</span>
                    人
                    <span>（829人）</span>
                  </p>
                </div>
              </div>
              <div class="item">
                <div class="item-left">
                  <img src="./images/left-two-item-five.png" alt="" />
                </div>
                <div class="item-right">
                  <p>严重精神障碍 （<span>98.07%</span>）</p>
                  <p>
                    签约人数
                    <span>818</span>
                    人
                    <span>（829人）</span>
                  </p>
                </div>
              </div>
              <div class="item">
                <div class="item-left">
                  <img src="./images/left-two-item-six.png" alt="" />
                </div>
                <div class="item-right">
                  <p>严重精神障碍 （<span>98.07%</span>）</p>
                  <p>
                    签约人数
                    <span>818</span>
                    人
                    <span>（829人）</span>
                  </p>
                </div>
              </div>
              <div class="item">
                <div class="item-left">
                  <img src="./images/left-two-item-seven.png" alt="" />
                </div>
                <div class="item-right">
                  <p>严重精神障碍 （<span>98.07%</span>）</p>
                  <p>
                    签约人数
                    <span>818</span>
                    人
                    <span>（829人）</span>
                  </p>
                </div>
              </div>
              <div class="item">
                <div class="item-left">
                  <img src="./images/left-two-item-eight.png" alt="" />
                </div>
                <div class="item-right">
                  <p>严重精神障碍 （<span>98.07%</span>）</p>
                  <p>
                    签约人数
                    <span>818</span>
                    人
                    <span>（829人）</span>
                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 中间区域 -->
        <div class="middle-area">
          <!-- 上方的卡片 -->
          <div class="area-card" id="area-card">
            <div class="middle-area-right">
              签约数
              <p>
                <span>2</span>
              </p>
              <p>
                <span>2</span>
              </p>
              <p>
                <span>2</span>
              </p>
              <p>
                <span>9</span>
              </p>
              <p>
                <span>9</span>
              </p>
              人
            </div>
            <!-- 地图区域 -->
            <div class="map">
              <!-- 放置地图 todo -->
              <div class="map-box"></div>
              <!-- 数据展示 todo-->
              <div class="map-data">
                <div class="first-line common-line">
                  <div class="item">
                    <img src="./images/middle-one.png" alt="" />
                    <div>
                      <p>男性签约数</p>
                      <p>6843</p>
                    </div>
                  </div>
                  <div class="item">
                    <img src="./images/middle-four.png" alt="" />
                    <div>
                      <p>完成任务数</p>
                      <p>56883</p>
                    </div>
                  </div>
                </div>
                <div class="two-line common-line">
                  <div class="item">
                    <img src="./images/middle-two.png" alt="" />
                    <div>
                      <p>女性签约数</p>
                      <p>6523</p>
                    </div>
                  </div>
                  <div class="item">
                    <img src="./images/middle-three.png" alt="" />
                    <div>
                      <p>生成任务数</p>
                      <p>104652</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 右侧区域 -->
        <div class="right-area">
          <div class="right-box-one">
            <div class="card-title">
              <span class="card-title-text">服务完成情况</span>
            </div>
            <div class="box-one-content">
              <div class="left">
                <div class="top" id="right-one-left"></div>
                <div class="bottom">
                  <p>高血压患者</p>
                  <p>服务完成率</p>
                </div>
              </div>
              <div class="right">
                <div class="top" id="right-one-right"></div>
                <div class="bottom">
                  <p>2型糖尿病患者</p>
                  <p>服务完成率</p>
                </div>
              </div>
            </div>
          </div>

          <div class="right-box-two">
            <div class="card-title">
              <span class="card-title-text">签约医生排行</span>
            </div>
            <div class="box-two-content">
              <div class="item">
                <div class="active-box">
                  <img class="active" src="./images/first.png" alt="" />
                </div>
                <div class="item-middle">
                  <p>王显良</p>
                  <p>明水县明水镇邵岗山东村卫生室</p>
                </div>
                <div class="item-right"></div>
              </div>
              <div class="item">
                <div class="active-box">
                  <img class="active" src="./images/second.png" alt="" />
                </div>
                <div class="item-middle">
                  <p>徐红梅</p>
                  <p>明水县明水镇邵岗山东村卫生室</p>
                </div>
                <div class="item-right"></div>
              </div>
              <div class="item">
                <div class="active-box">
                  <img class="active" src="./images/three.png" alt="" />
                </div>
                <div class="item-middle">
                  <p>林丽</p>
                  <p>明水县明水镇对龙村卫生室</p>
                </div>
                <div class="item-right"></div>
              </div>
              <div class="item">
                <div>
                  <span>4</span>
                </div>
                <div class="item-middle">
                  <p>林丽</p>
                  <p>明水县明水镇对龙村卫生室</p>
                </div>
                <div class="item-right"></div>
              </div>
              <div class="item">
                <div>
                  <span>5</span>
                </div>
                <div class="item-middle">
                  <p>林丽</p>
                  <p>明水县明水镇对龙村卫生室</p>
                </div>
                <div class="item-right"></div>
              </div>
              <div class="item">
                <div>
                  <span>6</span>
                </div>
                <div class="item-middle">
                  <p>林丽</p>
                  <p>明水县明水镇对龙村卫生室</p>
                </div>
                <div class="item-right"></div>
              </div>
              <div class="item">
                <div>
                  <span>7</span>
                </div>
                <div class="item-middle">
                  <p>林丽</p>
                  <p>明水县明水镇对龙村卫生室</p>
                </div>
                <div class="item-right"></div>
              </div>
              <div class="item">
                <div>
                  <span>8</span>
                </div>
                <div class="item-middle">
                  <p>林丽</p>
                  <p>明水县明水镇对龙村卫生室</p>
                </div>
                <div class="item-right"></div>
              </div>
              <div class="item">
                <div>
                  <span>9</span>
                </div>
                <div class="item-middle">
                  <p>林丽</p>
                  <p>明水县明水镇对龙村卫生室</p>
                </div>
                <div class="item-right"></div>
              </div>
              <div class="item">
                <div>
                  <span>10</span>
                </div>
                <div class="item-middle">
                  <p>林丽</p>
                  <p>明水县明水镇对龙村卫生室</p>
                </div>
                <div class="item-right"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </body>

  <script src="./js/chart.js"></script>
  <script type="text/javascript">
    var type = ""; // 1:中间展示市级地图 2:中间展示县区地图
    /**
     * 初始化
     */
    $(function () {
      // 加载所有图表
      initChart();
    });

    /**
     * 界面缩放
     */
    $(window).resize(function () {
      setTimeout(() => {
        var rightOneLeft = echarts.getInstanceByDom(
          document.getElementById("right-one-left")
        );
        var rightOneRight = echarts.init(
          document.getElementById("right-one-right")
        );
        rightOneLeft.resize();
        rightOneRight.resize();
      }, 100);
      clientWidth = document.documentElement.scrollWidth; //获取屏幕尺寸
      scale = clientWidth / 1920; //缩放比例
      initChart()
    });
  </script>
</html>
